<template>
  <div class="home">
    <my-attrs :list="list" v-model:attrs_name="attrs_name" v-model:tableData="tableData"></my-attrs>
    <div>
      <button>重置</button>
      <div v-if="attrs_name.length === 0">暂无属性组合</div>
      <table v-else border="1" cellspacing="0">
        <thead>
          <tr>
            <th v-for="(item, i) in attrs_name" :key="i">{{item}}</th>
          </tr>
        </thead>
        <tbody>
         <!--这里使用template标签时因为他不会渲染成真实的标签-->
            <tr v-for="(item, i) in tableData" :key="i">
              <td v-for="(it, ind) in item" :key="ind">{{it}}</td>
            </tr>
          
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import myAttrs from '@/components/attrs/myAttrs'
import axios from 'axios'
import { reactive, toRefs } from 'vue'
export default {
  name: 'Home',
  components: {
    myAttrs
  },
  setup() {
    // 声明数据
    const state = reactive({
      list: [],
      tableData: [],
      attrs_name: []
    })
    // 请求数据
    axios.get('data.json').then(res => {
      // console.log(res);
      state.list = res.data.data
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
      width: 800px;
      margin: 100px auto;
  }
  button {
    width: 130px;
    height: 36px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
  }
  table {
    width: 100%;
  }
  td {
        text-align: center;
    }
</style>
